<link rel="stylesheet" href="../../css/element.css">
<link rel="stylesheet" href="../../css/main.css">

<!-- 引入组件库 -->
<script type="text/javascript" src="../../js/vue.min.js"></script>
<script src="../../js/element.js"></script>
<script src="../../js/common.js"></script>

<style>

  .el-header {
    margin-bottom: 20px;
  }


</style>

<!-- 模型一 -->
<div id="addNode">
  <el-container>
    <el-header >
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">节点管理</el-breadcrumb-item>
        <el-breadcrumb-item>添加节点</el-breadcrumb-item>
      </el-breadcrumb>

      <p><el-link target="_blank" type="success" href="https://element.eleme.cn/#/zh-CN/component/form">文档地址</el-link></p>
    </el-header>
    <el-main v-loading="dataLoading">
      <el-steps :space="200" :active="0" finish-status="success" style="padding-left: 30%;margin-bottom: 20px;">
        <el-step title="步骤一：进行中" description="填写主机基本信息"></el-step>
        <el-step title="步骤二" description="添加主机"></el-step>
        <el-step title="步骤三" description="完成主机添加" ></el-step>
      </el-steps>
      <div style="margin:4% 15%;">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="ip地址" prop="ip">
            <el-col :span="20">
              <el-input v-model="ruleForm.ip" ></el-input>
            </el-col>
            
          </el-form-item>
          <el-form-item label="端口" prop="port">
            <el-col :span="20">
              <el-input v-model="ruleForm.port"></el-input>
            </el-col>
            
          </el-form-item>
          <el-form-item label="用户名" prop="username">
            <el-col :span="20">
              <el-input v-model="ruleForm.username"></el-input>
            </el-col>
              
          </el-form-item>
          <el-form-item label="密码" prop="pwd">
            <el-col :span="20">
              <el-input v-model="ruleForm.pwd"></el-input>
            </el-col>

          </el-form-item>
          <el-form-item label="说明" prop="desc">
            <el-col :span="20">
              <el-input type="textarea" v-model="ruleForm.desc"></el-input>
            </el-col>
            
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

    </el-main>
  </el-container>
</div>


<script>


  var app7 = new Vue({
  el: '#addNode',
  data() {
      return {
        ruleForm: {
          ip: '',
          username: '',
          pwd: '',
          desc: ''
        },
        rules: {
          ip: [
            { required: true, message: '请输入ip地址', trigger: 'blur' },
            { min: 8, max: 16, message: '长度在 8 到 16 个字符', trigger: 'blur' }
          ],
          port:[
            { required: true, message: '请输入端口', trigger: 'blur' },
            { min: 1, max: 5, message: '长度1 到 5 位数字', trigger: 'blur' }
          ],
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          pwd: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 4, max: 20, message: '长度在 4 到 20 个字符', trigger: 'blur' }
          ],
          desc: [
            { required: true, message: '说明', trigger: 'blur' }
          ]
        },
        dataLoading:false
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          // 遮罩，一秒后消除
          this.dataLoading=true;
          setTimeout(function(){
            app7.dataLoading=false;
            admin.msgSucess(app7,"提示","消除遮罩")
          },1000)

          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
})
  
</script>

